<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
      }
      body {
        position: relative;
        height: 100vh;
      }
      .modal {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        /* display: flex; */
        align-items: center;
        justify-content: center;
      }
      .change-btns {
        position: relative;
        z-index: 11;
      }
    </style>
  </head>
  <body>
    <button id="myBtn">显示弹框</button>
    <div class="modal" id="modal">
      <div>
        <div>
          <img
            src="../img/defaultInteriorBackgroundBanner.jpg"
            alt=""
            width="600"
            id="myImg"
          />
        </div>
        <div style="font-size: 40px" class="change-btns">
          <span onclick="changeScale(0.1)">+</span>
          <span onclick="changeScale(-0.1)">-</span>
          <span onclick="changeScale(1)">1:1</span>
          <span onclick="changeDeg(-90)">left</span>
          <span onclick="changeDeg(90)">right</span>
        </div>
      </div>
    </div>
    <script>
      const myBtn = document.getElementById("myBtn");
      const modal = document.getElementById("modal");
      const myImg = document.getElementById("myImg");
      myBtn.onclick = function () {
        modal.style.display = "flex";
      };
      modal.onclick = function (e) {
        if (e.target != this) return;
        modal.style.display = "none";
      };
      let scale = 1;
      // 放大缩小
      function changeScale(px) {
        if ((scale < 0.2 && px < 0) || (scale > 4 && px > 0)) {
          return;
        }
        if (px === 1) {
          myImg.style.transform = "scale(1)";
        } else {
          scale += px;
          myImg.style.transform = `scale(${scale})`; // scale(1.1)
        }
      }
      let currentDeg = 0;
      // 旋转
      function changeDeg(deg) {
        currentDeg += deg;
        console.log(deg);
        myImg.style.transform = `rotate(${currentDeg}deg)`; // rotate(90deg)
      }
    </script>
  </body>
</html>
